{%include file="header.html"%}
<script src="{%$URL%}resource/js/jquery-ui-1.12.1/jquery-ui.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="{%$URL%}resource/laydate/laydate.js"></script>
<style>
  table{text-align: center;}
  th{text-align:center; font-weight: bolder;}
  th a{ color:#000000;}
.firtd {	width: 100px;	padding-right: 10px;	text-align: right;}
input {	width: 350px;}
textarea {	width: 350px;	height: 100px;}
</style>
<body>
<div class="fixed-bar">
  <div class="item-title">
    <h3>广告列表</h3>
    <select name="pid">
    	<option value="0">所有广告</option>
    	{%foreach from=$p_list item=listp%}
        <option {%if $listp.position_id==$pid%}selected{%/if%} value="{%$listp.position_id%}">{%$listp.position_name%}</option>
      {%/foreach%}
    </select>
    <input value=" 搜索 " id="but_sousuo" style="width:40px; height:27px; margin-top:13px;" class="button" type="submit">
    <script>
    	$("#but_sousuo").click(function(){
			var pid=$("select[name=pid]").val();
			location.href="ads.php?act=ads_list&pid="+pid;
		});
    </script>
    <div style="background:rgba(251,112,45,1);width:125px;height:40px;float:right;text-align:center;border-radius:5px;">
      <a href="ads.php?act=add">
        <h5 style="padding:10px;color:#fff;">添加广告</h5>
      </a>
    </div>
  </div>
</div>
<div class="fixed_bottom">
  <form method="post" action="" id="aspnetForm" name="form1">
    <table align="center;" class="table tb-type2">
      <thead>
        <tr>
          <th width="50"><a>编号</a></th>
          <th><a>广告名称</a></th>
          <th><a>广告位置</a></th>
          <th><a>媒介类型</a></th>
          <th width="200"><a>开始日期</a></th>
          <th width="200"><a>结束日期</a></th>
          <th><a>点击次数</a></th>
          <th width="50"><a>排序</a></th>
          <th><a>操作</a></th>
        </tr>
      </thead>
      <tbody id="sortable">
        {%foreach from=$list item=list1 key=k%}
            <tr id="{%$list1.sort_id%}" alt="{%$list1.ad_id%}">
              <td>{%$list1.ad_id%}</td>
              <td>{%$list1.ad_name%}</td>
              <td>{%$list1.position_name%}</td>
              <td>图片</td>
              <td><span>{%$list1.start_time|date_format:'%Y-%m-%d %H:%M:%I'%}</span></td>
              <td><span>{%$list1.end_time|date_format:'%Y-%m-%d %H:%M:%I'%}</span></td>
              <td>{%$list1.click_count%}</td>
              <td class="sort_id">{%$list1.sort_id%}</td>
              <td>
                <a href="ads.php?act=listedit&ad_id={%$list1.ad_id%}">编辑</a>
                <a href="ads.php?act=ads_del&ad_id={%$list1.ad_id%}">删除</a>
              </td>
            </tr>
        {%/foreach%}
      </tbody>
      <input type="hidden" id="ids_list" />
    </table>
    <div class="page">{%$page%}</div>
  </form>
</div>
</body>
<script>
var sort_hid="";//更新前的排序sortid
$("#sortable tr").each(function(){
   sort_hid = sort_hid + $(this).attr("id")+",";
});
$("#ids_list").val(sort_hid);

var fixHelper = function(e, ui) {  
    ui.children().each(function() {  
    	$(this).width($(this).width());  //在拖动时，拖动行的cell（单元格）宽度会发生改变。在这里做了处理就没问题了   
  	});  
    return ui;  
}
$( "#sortable").sortable({
    cursor: "move",
	opacity:0.6,//拖动时，透明度为0.6
	revert:true,//释放时，增加动画
	//items :".sort_id",//只是li可以拖动
    helper: fixHelper,//调用fixHelper
    axis:"y",//x横向拖动，y纵向拖动
    start:function(e, ui){
    	ui.helper.css({"background":"#DAF3FD"});     //拖动时的行，要用ui.helper
    	return ui;
	},
	update :function(event, ui){//更新排序之后
		var ids="";//更新后的索引id
		var id=ui.item.attr("alt");//拖动当前元素的id
        $("#sortable tr").each(function(){
           ids = ids + $(this).attr("alt")+",";
		});
		var text=$("#ids_list").val();//更新前的排序sortid
		$.post("ajax.php?act=ztpx",{ids:ids,sort_ids:text},function(data){
			if(data==1){layer.msg("更新成功！");window.location.reload();}else{layer.msg("更新失败！");}
		});
	},
})
</script>
</html>